<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 3 | Log in</title>
  <style>
      #canvas {
        background-color: gainsboro;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../admin/plugins/fontawesome-free/css/all.css">
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="../admin/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <link rel="stylesheet" href="../admin/dist/css/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body  class="hold-transition login-page">
<canvas id="canvas">
</canvas>
<div class="login-box">
  <div class="login-logo" style="color: #1baeae;">
    <img src="../mall/image/new-bee-logo-3.png"; style="height: 58px;float: left;margin-left: 10px;">
    <h1>管理系统登陆</h1>
  </div>
  <!-- /.login-logo -->
  <div class="card" style="width: 380px;">
    <div class="card-body login-card-body">
      <p class="login-box-msg"> NewBee MALL , Let's Go !</p>
      <form action="/admin/login" method="post">
          <div th:if="${not #strings.isEmpty(session.errorMsg)}" class="form-group">
              <div class="alert alert-danger" th:text="${session.errorMsg}"></div>
          </div>
        <div class="input-group mb-3">
          <input type="text" name="userName" class="form-control" placeholder="请输入账号">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-envelope"></span>
            </div>
          </div>
    </div>
        <br>
        <div class="input-group mb-3">
          <input type="password" name="password" class="form-control" placeholder="请输入密码">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
        </div>
        <br>
        <div class="row">
          <div class="col-6">
            <input type="text" style="height: 40px" class="form-control" name="verifyCode" placeholder="请输入验证码" >
          </div>
          <div class="col-6">
            <img alt="单击图片刷新！" class="pointer" th:src="@{/defaultKaptcha}"
                 onclick="this.src='/defaultKaptcha?d='+new Date()*1">
          </div>
        </div>
        <br>
          <!-- /.col -->
          <div class="col-4">
            <button type="submit" class="btn btn-primary btn-block" style="width: 100px">Sign In</button>
          </div>
      </form>
    </div>
  </div>
</div>
<script type="text/javascript" src="../admin/js/ball.js"></script>
<script type="text/javascript" src="../admin/js/utils.js"></script>
<script src="../admin/plugins/jquery/jquery.min.js"></script>
<script src="../admin/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../admin/dist/js/adminlte.min.js"></script>
<script>
  window.addEventListener("load", function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var mouse = utils.captureMouse(canvas);
    var balls = [];
    var numBalls = 30,
            minDist = 200;
    // springAmount = 0.0005;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    //遍历实例化球，并初始化
    for (var size, ball, i = 0; i < numBalls; i++) {
      size = Math.random() * 10 + 2;
      ball = new Ball(size, "#fff");
      ball.x = Math.random() * canvas.width;
      ball.y = Math.random() * canvas.height;
      //随机向量
      ball.vx = Math.random() * 6 - 3;
      ball.vy = Math.random() * 6 - 3;
      ball.mass = size;
      balls.push(ball);
    };
    function spring(partA, partB) {
      var dx = partB.x - partA.x,
              dy = partB.y - partA.y,
              dist = Math.sqrt(dx * dx + dy * dy);
      if (dist < minDist) {
        var alpha = 1 - dist / minDist;
        ctx.strokeStyle = utils.colorToRGB("#ffffff", alpha);
        ctx.beginPath();
        ctx.moveTo(partA.x, partA.y);
        ctx.lineTo(partB.x, partB.y);
        ctx.stroke();
      }
    }
    //移动的方法
    function move(partA) {
      partA.x += partA.vx;
      partA.y += partA.vy;
      if (partA.x > canvas.width) {
        partA.x = 0;
      } else if (partA.x < 0) {
        partA.x = canvas.width;
      }
      if (partA.y > canvas.height) {
        partA.y = 0;
      } else if (partA.y < 0) {
        partA.y = canvas.height;
      }
      for (var partB, i = 0, j = i; j < numBalls; j++) {
        partB = balls[j];
        spring(partA, partB);
      }
    }
    //绘画方法
    function draw(ball) {
      ball.draw(ctx);
    };
    //实现绘画
    (function drawFrame() {
      window.requestAnimationFrame(drawFrame, canvas);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      balls.forEach(move);
      balls.forEach(draw);
    })();
  }, false);
</script>
</body>

</html>
